<template>
  <div id="data-view">
    <dv-full-screen-container>
      <title-center v-if="showTitle == 'center'" title="大屏可视化" />
      <title-left v-if="showTitle == 'left'" title="大屏可视化" />
      <title-between v-if="showTitle == 'between'" title="大屏可视化" />
      <dv-border-box-13 class="layout-base-container">
        <div
          class="base-left-chart-container"
          :style="showData == 'data' ? 'width:22%' : 'width:10%'"
        >
          <dv-border-box-10 v-if="showData == 'data'">
            <cmp-bar-chart />
            <!-- <cmp-bar-line-chart /> -->
            <!-- <Left-Chart-1 /> -->
            <Left-Chart-2 />
            <Left-Chart-3 />
          </dv-border-box-10>

          <first-fun-one v-if="showData == 'funOne'"></first-fun-one>
          <first-fun-two v-if="showData == 'funTwo'"></first-fun-two>
        </div>
        <div class="base-center-chart-container">
          <!-- <Center-Cmp /> -->
        </div>
        <div class="base-right-chart-container">
          <dv-border-box-10 class="base-top-chart-1">
            <Right-Chart-1 />
          </dv-border-box-10>
          <dv-border-box-10 class="base-center-chart-2" :reverse="true">
            <Right-Chart-2 />
          </dv-border-box-10>
          <dv-border-box-10 class="base-bottom-chart-3">
            <Right-Chart-1 />
          </dv-border-box-10>
        </div>
        <!-- 功能区（二级）-->
        <second-fun v-if="showSecondFun"></second-fun>
        <div class="config-file-switch">
          <i class="el-icon-setting icon-style" @click="switchDrawer"></i>
        </div>
        <el-drawer
          title="config"
          size="15%"
          :modal="false"
          :visible.sync="drawer"
          :with-header="false"
        >
          <el-switch
            style="display: block"
            v-model="value2"
            @change="switchSecondFun"
            active-color="#fff"
            inactive-color="#f40"
            active-text="二级按钮"
            inactive-text="二级按钮"
          >
          </el-switch>
          <div>
            <el-radio-group
              v-model="showTitle"
              @change="switchTitle(showTitle)"
            >
              <el-radio label="center">center</el-radio>
              <el-radio label="left">left</el-radio>
              <el-radio label="between">between</el-radio>
            </el-radio-group>
          </div>
          <div>
            <el-radio-group v-model="showData" @change="switchPanel(showData)">
              <el-radio label="data">data</el-radio>
              <el-radio label="funOne">funOne</el-radio>
              <el-radio label="funTwo">funTwo</el-radio>
            </el-radio-group>
          </div>
        </el-drawer>
      </dv-border-box-13>
    </dv-full-screen-container>
  </div>
</template>

<script>
// 标题区组件
import TitleCenter from "@/components/common/title/TitleCenter.vue";
import TitleLeft from "@/components/common/title/TitleLeft.vue";
import TitleBetween from "@/components/common/title/TitleBetween.vue";
// 功能区组件
import FirstFunOne from "@/components/common/function/FirstFunOne.vue";
import FirstFunTwo from "@/components/common/function/FirstFunTwo.vue";
import SecondFun from "@/components/common/function/SecondFun.vue";
// 图表组件
import CmpBarChart from "@/components/chart/bar/CmpBarChart.vue";
import CmpBarLineChart from "@/components/chart/bar/CmpBarLineChart.vue";
// import LeftChart1 from './pageComponent/LeftChart1'
import LeftChart2 from "./pageComponent/LeftChart2.vue";
import LeftChart3 from "./pageComponent/LeftChart3.vue";
import CenterCmp from "./pageComponent/CenterCmp.vue";
import RightChart1 from "./pageComponent/RightChart1.vue";
import RightChart2 from "./pageComponent/RightChart2.vue";
import BottomCharts from "./pageComponent/BottomCharts.vue";

export default {
  name: "chart",
  components: {
    TitleCenter,
    TitleLeft,
    TitleBetween,
    CmpBarChart,
    CmpBarLineChart,
    // LeftChart1,
    LeftChart2,
    LeftChart3,
    CenterCmp,
    RightChart1,
    RightChart2,
    BottomCharts,
    FirstFunOne,
    FirstFunTwo,
    SecondFun
  },
  data() {
    return {
      showTitle: "between",
      showData: "data",
      showSecondFun: false,
      drawer: false,
      value1: true,
      value2: true
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    switchDrawer() {
      this.drawer = true;
    },
    switchPanel(value) {
      this.showData = value;
    },
    switchSecondFun() {
      this.showSecondFun = !this.showSecondFun;
    },
    switchTitle(value) {
      console.log(value);
      this.showTitle = value;
    }
  },
  watch: {}
};
</script>

<style lang="scss">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("../../assets/img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .layout-base-container {
    height: calc(100% - 80px);
    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .base-left-chart-container {
    position: absolute;
    left: 20px;
    top: 20px;
    bottom: 20px;
    z-index: 100;
    // width: 22%;
    // padding: 10px;
    box-sizing: border-box;
    .border-box-content {
      flex-direction: column;
    }
  }

  .base-center-chart-container {
    width: 100%;
  }
  .base-right-chart-container {
    position: absolute;
    right: 20px;
    top: 20px;
    bottom: 20px;
    z-index: 100;
    width: 22%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .base-bottom-button-container {
    position: absolute;
    bottom: 10px;
    height: 8%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .base-bottom-button-group {
      width: 40%;
      display: flex;
      justify-content: center;
      border: 2px dashed #233977;
    }
  }
  .config-file-switch {
    position: fixed;
    right: 0;
    top: 52%;
    border-radius: 50%;
    background: #5159a8;
    z-index: 200;
    width: 30px;
    height: 30px;
    display: flex;
    justify-self: center;
    align-items: center;
    .icon-style {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }
  .base-top-chart-1,
  .base-center-chart-2,
  .base-bottom-chart-3 {
    height: 33%;
  }
}
</style>
